<template>
  <div class="h-87">
    <div id="demo" style="z-index: 999">
      <div id="demoMap" />
      <!--      <div class="rightTable">-->
      <!--        <table v-show="showNum == 0">-->
      <!--          <tr>-->
      <!--            <th>七大洲</th>-->
      <!--            <th>产奶量(万吨)</th>-->
      <!--            <th>占比</th>-->
      <!--          </tr>-->
      <!--          <tr v-for="(item, index) in data" :key="index" align="center">-->
      <!--            <td>{{ item.name }}</td>-->
      <!--            <td>{{ item.value[0] }}</td>-->
      <!--            <td>{{ item.value[1] }}</td>-->
      <!--          </tr>-->
      <!--        </table>-->
      <!--        <table v-show="showNum == 1">-->
      <!--          <tr>-->
      <!--            <th>省份</th>-->
      <!--            <th>产奶量(万吨)</th>-->
      <!--            <th>存栏量(万只)</th>-->
      <!--          </tr>-->
      <!--          <tr v-for="(item, index) in dataPin" :key="index" align="center">-->
      <!--            <td>{{ item.name }}</td>-->
      <!--            <td>{{ item.value[0] }}</td>-->
      <!--            <td>{{ item.value[1] }}</td>-->
      <!--          </tr>-->
      <!--        </table>-->
      <!--        <table v-show="showNum == 2">-->
      <!--          <tr>-->
      <!--            <th>区县</th>-->
      <!--            <th>产奶量(万吨)</th>-->
      <!--            <th>存栏量(万只)</th>-->
      <!--          </tr>-->
      <!--          <tr v-for="(item, index) in dataProv" :key="index" align="center">-->
      <!--            <td>{{ item.name }}</td>-->
      <!--            <td>{{ item.value[0] }}</td>-->
      <!--            <td>{{ item.value[1] }}</td>-->
      <!--          </tr>-->
      <!--        </table>-->
      <!--      </div>-->
    </div>
    <lottie :options="defaultOptions" @animCreated="handleAnimation" style="z-index: -1"/>
  </div>
</template>
<script>
import { continentData, getEchartsDataS, provinceCountyData } from '@/api/connector'
import * as echarts from 'echarts'
import 'echarts/map/js/world.js'
import 'echarts/map/js/china.js'
import 'echarts/map/js/province/shanxi1.js'
import * as animationData from '@/assets/images/robot/data.json' // 引入data.json
import Sxmap from '../../../utils/aa.json'
// animationData.assets.forEach((item) => {
//   item.u = ''
//   if (item.w && item.h) {
//     item.p = require(`@/assets/images/robot/images/${item.p}`)
//   }
// }) // 获取静态资源
export default {
  name: 'Demo',
  data() {
    return {
      defaultOptions: { animationData: animationData.default }, // 动画数据：注意是 .default
      myChart: null,
      mapName: 'world',
      showNum: 0,
      timer: null,
      data: [],
      dataPin: [],
      dataProv: [],
      geoCoordMap: {
        北美洲: [-103.51055, 44.077163],
        南美洲: [-60.024658, -10.616557],
        欧洲: [20.003583, 50.648408],
        亚洲: [97.388938, 56.883372],
        非洲: [21.717981, 7.387893],
        大洋洲: [134.143287, -25.473671],
        中国大陆: [116.398439, 39.911145]
      },
      geoCoordMap2: {
        甘肃省: [103.833625, 36.061965],
        陕西省: [108.962114, 34.282847],
        山东省: [117.113104, 36.656561],
        河北省: [114.526245, 38.050702],
        云南省: [102.714695, 25.032968],
        河南省: [113.644397, 34.75914],
        黑龙江省: [126.553523, 45.809279]
      },
      geoCoordMap3: {
        千阳县: [107.125672, 34.646406],
        陇县: [106.881503, 34.887174],
        蒲城县: [109.615497, 34.979021],
        富平县: [109.180115, 34.75465],
        泾阳县: [108.843914, 34.532959],
        乾县: [108.244799, 34.53045]
      },
      max: 480,
      min: 9, // todo
      maxSize4Pin: 150,
      minSize4Pin: 20,
      worldArrs: [],
      chinaArrs: [],
      provinceArrs: [],
      daddd: [],
      sum: 0,
      top10: []
    }
  },
  created() {
    // 世界地图数据
    this.MapDataArea()
    this.$nextTick(() => {
      this.myChart = echarts.init(document.getElementById('demoMap'))
      echarts.registerMap('shanxi', Sxmap)
      this.getWorldsData()
    })
  },
  mounted() {
    // console.log(this.data)
  },
  methods: {
    handleAnimation: function(anim) {
      this.anim = anim
    },
    GetPercent(num, total) {
      // / 求百分比
      num = parseFloat(num)
      total = parseFloat(total)
      if (isNaN(num) || isNaN(total)) {
        return '-'
      }
      return total <= 0 ? '0%' : Math.round((num / total) * 10000) / 100.0 + '%'
    },
    getWorldsData() {
      this.showNum = 0
      // // 政府决策七大洲数据
      continentData({ tenantCode: 'T000023', dataType: 'DATA_TYPE_MILK_PRODUCTION_BY_CONTINENT' }).then((res) => {
        const sum = res.data.c_1 + res.data.c_2 + res.data.c_3 + res.data.c_4 + res.data.c_5 + res.data.c_6
        this.data = [
          {
            name: '亚洲',
            value: [res.data.c_1, this.GetPercent(res.data.c_1, sum)],
            color: 'RGBA(60, 181, 255, 1)',
            color2: 'RGBA(60, 181, 255, 0.4)',
            image: require('@/assets/sheep/sheep4.png')
          },
          {
            name: '欧洲',
            value: [res.data.c_2, this.GetPercent(res.data.c_2, sum)],
            color: 'RGBA(102, 71, 255, 1)',
            color2: 'RGBA(102, 71, 255, 0.4)',
            image: require('@/assets/sheep/sheep5.png')
          },
          {
            name: '北美洲',
            value: [res.data.c_4, this.GetPercent(res.data.c_4, sum)],
            color: 'RGBA(24, 216, 177, 1)',
            color2: 'RGBA(24, 216, 177, 0.4)',
            image: require('@/assets/sheep/sheep6.png')
          },
          {
            name: '南美洲',
            value: [res.data.c_5, this.GetPercent(res.data.c_5, sum)],
            color: 'RGBA(233, 208, 23, 1)',
            color2: 'RGBA(233, 208, 23, 0.4)',
            image: require('@/assets/sheep/sheep0.png')
          },
          {
            name: '非洲',
            value: [res.data.c_6, this.GetPercent(res.data.c_6, sum)],
            color: 'RGBA(246, 142, 72, 1)',
            color2: 'RGBA(246, 142, 72, 0.4)',
            image: require('@/assets/sheep/sheep1.png')
          },
          {
            name: '大洋洲',
            value: [res.data.c_3, this.GetPercent(res.data.c_3, sum)],
            color: 'RGBA(17, 160, 187, 1)',
            color2: 'RGBA(17, 160, 187, 0.4)',
            image: require('@/assets/sheep/sheep2.png')
          },
          {
            name: '中国大陆',
            value: [res.data.c_7, this.GetPercent(res.data.c_7, sum)],
            color: 'RGBA(71, 188, 206, 1)',
            color2: 'RGBA(71, 188, 206, 0.4)',
            image: require('@/assets/sheep/sheep3.png')
          }
        ]
        this.drawMap(
          this.myChart,
          this.worldArrs,
          'world',
          this.data,
          this.convertData(this.geoCoordMap, this.data),
          this.convertData(
            this.geoCoordMap,
            this.data
              .sort(function(a, b) {
                return b.value - a.value
              })
              .slice(0, 5)
          )
        )
      })
    },
    getChinaDatas() {
      this.showNum = 1
      // 政府决策 省、县级数据
      this.dataPin = []
      provinceCountyData({ tenantCode: 'T000023', dataType: 'MAIN_BREEDING_AREAS_OF_DAIRY_GOATS_IN_CHINA' }).then((res) => {
        res.data.rows.forEach((item) => {
          let color = ''
          let color2 = ''
          let image = ''
          switch (item.name) {
            case '甘肃省':
              color = 'rgba(246, 142, 72, 1)'
              color2 = 'rgba(246, 142, 72, 0.4)'
              image = require('@/assets/sheep/sheep1.png')
              break
            case '云南省':
              color = 'rgba(17, 160, 187, 1)'
              color2 = 'rgba(17, 160, 187, 0.4)'
              image = require('@/assets/sheep/sheep2.png')
              break
            case '陕西省':
              color = 'rgba(71, 188, 206, 1)'
              color2 = 'rgba(71, 188, 206, 0.4)'
              image = require('@/assets/sheep/sheep3.png')
              break
            case '山东省':
              color = 'rgba(24, 216, 177, 1)'
              color2 = 'rgba(24, 216, 177, 0.4)'
              image = require('@/assets/sheep/sheep6.png')
              break
            case '河南省':
              color = 'rgba(233, 208, 23, 1)'
              color2 = 'rgba(233, 208, 23, 0.4)'
              image = require('@/assets/sheep/sheep0.png')
              break
            case '黑龙江省':
              color = 'rgba(194, 108, 254, 1)'
              color2 = 'rgba(194, 108, 254, 0.4)'
              image = require('@/assets/sheep/sheep7.png')
              break
          }

          this.dataPin.push({
            name: item.name,
            value: [item.c_2, item.c_1],
            color: color,
            color2: color2,
            image
          })
        })
        this.drawMap(
          this.myChart,
          this.chinaArrs,
          'china',
          this.dataPin,
          this.convertData(this.geoCoordMap2, this.dataPin),
          this.convertData(
            this.geoCoordMap2,
            this.dataPin
              .sort(function(a, b) {
                return b.value - a.value
              })
              .slice(0, 5)
          )
        )
      })
    },
    getShanxiDatas() {
      this.showNum = 2
      this.dataProv = []
      provinceCountyData({ tenantCode: 'T000023', dataType: 'MAIN_BREEDING_AREAS_OF_DAIRY_GOATS_IN_SHAANXI' }).then((res) => {
        res.data.rows.forEach((item) => {
          let color = ''
          let color2 = ''
          let image = ''
          switch (item.name) {
            case '蒲城县':
              color = 'rgba(24, 216, 177, 1)'
              color2 = 'rgba(24, 216, 177, 0.4)'
              image = require('@/assets/sheep/sheep6.png')
              break
            case '富平县':
              color = 'rgba(246, 142, 72, 1)'
              color2 = 'rgba(246, 142, 72, 0.4)'
              image = require('@/assets/sheep/sheep1.png')
              break
            case '陇县':
              color = 'rgba(71, 188, 206, 1)'
              color2 = 'rgba(71, 188, 206, 0.4)'
              image = require('@/assets/sheep/sheep3.png')
              break
            case '千阳县':
              color = 'rgba(233, 208, 23, 1)'
              color2 = 'rgba(233, 208, 23, 0.4)'
              image = require('@/assets/sheep/sheep0.png')
              break
            case '泾阳县':
              color = 'rgba(17, 160, 187, 1)'
              color2 = 'rgba(17, 160, 187, 0.4)'
              image = require('@/assets/sheep/sheep2.png')
              break
            case '乾县':
              color = 'rgba(194, 108, 254, 1)'
              color2 = 'rgba(194, 108, 254, 0.4)'
              image = require('@/assets/sheep/sheep7.png')
              break
          }
          this.dataProv.push({
            name: item.name,
            value: [item.c_2, item.c_1],
            color,
            color2,
            image
          })
        })
        getEchartsDataS('SALES_OF_SHEEP_MILK_PROCESSING_IN_SHAANXI').then(res => {
          this.top10 = res.data.rows
          this.drawMap(
            this.myChart,
            this.provinceArrs,
            'shanxi',
            this.dataProv,
            this.convertData(this.geoCoordMap3, this.dataProv),
            this.convertData(
              this.geoCoordMap3,
              this.dataProv
                .sort(function(a, b) {
                  return b.value - a.value
                })
                .slice(0, 5)
            )
          )
          // console.log(res);
        }).catch(err => {
          console.log(err)
        })
      })
    },
    convertData(geoCoordMap, data) {
      // console.log(data)
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            image: data[i].image
          })
        }
      }
      return res
    },
    // areaColor
    MapDataArea() {
      const Asia = ['China'] // 中国大陆
      // 大洋洲
      var Oceania = ['Australia', 'Papua New Guinea', 'Fiji', 'New Caledonia', 'New Zealand']
      var South = [
        'Colombia',
        'Nicaragua',
        'Ecuador',
        'Peru',
        'Venezuela',
        'Bolivia',
        'Brazil',
        'Chile',
        'Suriname',
        'Uruguay',
        'Republic of Paraguay',
        'Argentina',
        'Paraguay',
        'Guyana'
      ]
      var NorthArea = [
        'Costa Rica',
        'El Salvador',
        'Dominica',
        'Guatemala',
        'Honduras',
        'Panama',
        'Cuba',
        'Jamaica',
        'Mexico',
        'Puerto Rico',
        'Trinidad and Tobago',
        'Belize',
        'Canada',
        'United States',
        'Bahamas',
        'Greenland'
      ]
      var Africa = [
        'Rwanda',
        'Burundi',
        'Uganda',
        'Ethiopia',
        'Madagascar',
        'Haiti',
        'Kenya',
        'Somalia',
        'Eritrea',
        'Burkina Faso',
        'Malawi',
        'Egypt',
        'Sierra Leone',
        'Tanzania',
        'Nigeria',
        'Niger',
        'Mauritania',
        'Cameroon',
        'Benin',
        'Morocco',
        'Mali',
        'Congo',
        'Guinea',
        'Liberia',
        'Togo',
        'Mauritius',
        'Mozambique',
        'Algeria',
        'Swaziland',
        'Chad',
        'Senegal',
        'Zimbabwe',
        "Cote D'Ivoire",
        'Zambia',
        'Tunisia',
        'Ghana',
        'Central African Republic',
        'Angola',
        'Gambia',
        'Congo (Congo-Kinshasa)',
        'Sudan',
        'Gabon',
        'Libya',
        'South Africa',
        'Namibia',
        'Botswana',
        'Somalia',
        'quatorial Guinea',
        'Guinea-Bissau',
        'Western Sahara',
        'Lesotho',
        'Djibouti',
        'Dem. Rep. Congo',
        'Central African Rep.',
        'S. Sudan',
        'Eq. Guinea',
        'W. Sahara'
      ]
      var Europe = [
        'Russian Federation',
        'Poland',
        'Greece',
        'Macedonia',
        'Albania',
        'Spain',
        'Croatia',
        'Switzerland',
        'United Kingdom',
        'Ireland',
        'Italy',
        'Netherlands',
        'Montenegro',
        'Slovenia',
        'Germany',
        'Luxembourg',
        'Portugal',
        'Serbia',
        'France',
        'Austria',
        'Czech',
        'Slovakia',
        'Latvia',
        'Norway',
        'Belgium',
        'Denmark',
        'Hungary',
        'Sweden',
        'Romania',
        'Bulgaria',
        'Lithuania',
        'Estonia',
        'Belarus',
        'Moldova',
        'Finland',
        'Ukraine',
        'Czech Rep.',
        'Bosnia and Herz.'
      ]
      var China_province = ['甘肃', '云南', '陕西', '山东', '河南', '黑龙江']
      var shanxi_county = ['陇县', '千阳县', '乾县', '泾阳县', '富平县', '蒲城县']
      var China_province_color = [
        'rgba(246, 142, 72, 0.4)',
        'rgba(17, 160, 187, 0.4)',
        'rgba(0, 150, 202, 1)',
        'rgba(24, 216, 177, 0.4)',
        'rgba(233, 208, 23, 0.4)',
        'rgba(194, 108, 254, 0.4)'
      ]
      var shanxi_county_color = [
        'rgba(0, 150, 202, 1)',
        'rgba(233, 208, 23, 0.4)',
        'rgba(194, 108, 254, 0.4)',
        'rgba(17, 160, 187, 0.4)',
        'rgba(246, 142, 72, 0.4)',
        'rgba(24, 216, 177, 0.4)'
      ]
      const regionsAsia = []
      const regionOceania = []
      const regionSouth = []
      const regionNorth = []
      const regionAfrica = []
      const regionEurope = []
      const regionChina_province = []
      const regionShanxi_county = []
      Asia.forEach(function(item) {
        regionsAsia.push({
          name: item,
          itemStyle: {
            areaColor: 'rgba(0, 150, 202, 1)',
            color: 'rgba(0, 150, 202, 1)'
          }
        })
      })
      Oceania.forEach(function(item) {
        // console.log(item)
        regionOceania.push({
          name: item,
          itemStyle: {
            areaColor: 'rgba(17, 160, 187, 0.4)',
            color: 'rgba(17, 160, 187, 0.4)'
          }
        })
      })
      South.forEach(function(item) {
        // console.log(item)
        regionSouth.push({
          name: item,
          itemStyle: {
            areaColor: 'rgba(233, 208, 23, 0.4)',
            color: 'rgba(233, 208, 23, 0.4)'
          }
        })
      })
      NorthArea.forEach(function(item) {
        // console.log(item)
        regionNorth.push({
          name: item,
          itemStyle: {
            areaColor: 'rgba(24, 216, 177, 0.4)',
            color: 'rgba(24, 216, 177, 0.4)'
          }
        })
      })
      Africa.forEach(function(item) {
        // console.log(item)
        regionAfrica.push({
          name: item,
          itemStyle: {
            areaColor: 'rgba(246, 142, 72, 0.4)',
            color: 'rgba(246, 142, 72, 0.4)'
          }
        })
      })
      Europe.forEach(function(item) {
        regionEurope.push({
          name: item,
          itemStyle: {
            areaColor: 'rgba(102, 71, 255, 0.4)',
            color: 'rgba(102, 71, 255, 0.4)'
          }
        })
      })
      China_province.forEach(function(item, index) {
        // console.log(item)
        regionChina_province.push({
          name: item,
          itemStyle: {
            areaColor: China_province_color[index],
            color: China_province_color[index]
          }
        })
      })
      shanxi_county.forEach(function(item, index) {
        // console.log(item)
        regionShanxi_county.push({
          name: item,
          itemStyle: {
            areaColor: shanxi_county_color[index],
            color: shanxi_county_color[index]
          }
        })
      })
      this.worldArrs = regionsAsia.concat(regionOceania, regionSouth, regionNorth, regionAfrica, regionEurope)
      this.chinaArrs = regionChina_province
      this.provinceArrs = regionShanxi_county
    },
    drawMap(myChart, regionsArrs, mapType, datas, scatterData, catterData) {
      const worldOption = {
        tooltip: {
          padding: 0,
          enterable: false,
          transitionDuration: 1,
          textStyle: {
            color: '#000',
            decoration: 'none'
          },
          backgroundColor: 'none',
          formatter: function(params) {
            if (params.data != undefined) {
              var tipHtml = ''
              tipHtml =
                '<div style="width:210px;height:140px;border-radius:15px;">' +
                '<p style="height:46px;line-height:46px;width:100%;background:#1D3148;color:white;padding-left:20px;border-radius:10px 10px 0 0;">' +
                params.name +
                '</p>' +
                '<div style="height:95px;width:100%;background:rgba(18, 33, 53, 0.85);border-radius:0 0 10px 10px;">' +
                '<p style="padding:10px 20px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #E9F7FF;line-height: 20px;">' +
                '产奶量：' +
                '<span class="map-title1">' +
                params.data.value[2] +
                '万吨' +
                '</span>' +
                '</p>' +
                '<p style="padding:10px 20px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #E9F7FF;line-height: 20px;">' +
                (mapType === 'world' ? '占比：' : '存栏量：') +
                '<span class="map-title2">' +
                params.data.value[3] +
                (mapType === 'world' ? '' : '万只') +
                '</span>' +
                '</p>' +
                '</div>' +
                '</div>'

              return tipHtml
            } else {
              return ''
            }
          }
        },
        geo: {
          show: true,
          map: mapType,
          zoom: mapType == 'world' ? 1 : 1.1,
          left: mapType == 'world' ? 250 : mapType == 'china' ? 350 : 730,
          roam: true,
          scaleLimit: {
            // 滚轮缩放的极限控制
            min: 0.1,
            max: 10
          },
          label: {
            normal: {
              show: mapType == 'china',
              textStyle: {
                color: 'rgba(255, 255, 255, 0.6)'
              }
            },
            emphasis: {
              show: false, // false ---> hover不显示国家名称
              textStyle: {
                color: 'rgba(255, 255, 255, 0.6)'
              }
            }
          },
          itemStyle: {
            normal: {
              areaColor: 'rgba(60, 181, 255, 0.4)',
              borderColor: '#3CB5FF'
            },
            emphasis: {
              areaColor: 'rgba(60, 181, 255, 0.6)'
            }
          },
          regions: regionsArrs
        },
        series: [
          // 区域颜色
          {
            type: 'map',
            map: mapType,
            geoIndex: 0,
            zoom: 2,
            // aspectScale: 1.5, // 长宽比
            showLegendSymbol: false, // 存在legend时显示
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            roam: false,
            animation: false,
            data: datas
          },
          {
            name: '散点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: scatterData,
            symbolSize: 22,
            // symbol: function (value, params) {
            //   console.log(value, params)
            //   return 'image://' + params.data.image
            // },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              color: (params) => {
                return datas[params.dataIndex].color
              },
              shadowColor: (params) => {
                return datas[params.dataIndex].color
              }
            }
          },
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: scatterData,
            symbolSize: 22,
            symbol: function(value, params) {
              return 'image://' + params.data.image
            },
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            }
          }
        ]
      }
      if (worldOption.series[0].map === 'china') {
        datas.splice(datas.length - 1, 1)
        // datas = datas.sort((a, b) => {
        //   return b.value[0] - a.value[0]
        // })
        worldOption['title'] = [
          {
            id: 'statistic',
            text: '中国奶山羊主要养殖地区产奶分析',
            left: '72%',
            top: '5%',
            bottom: 20,
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          }
        ]
        worldOption['grid'] = {
          left: '75%',
          top: '10%',
          bottom: '50%',
          width: '20%'
        }
        worldOption['xAxis'] = {
          name: '万吨',
          show: true,
          type: 'value',
          nameTextStyle: {
            color: '#E9F7FF',
            fontSize: 15,
            padding: [30, 0, 0, 0]
          },
          nameGap: 50,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 15,
              color: '#E9F7FF'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        }
        worldOption['yAxis'] = {
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 15,
              color: '#E9F7FF'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: datas.map(item => item.name)
        }
        worldOption.series.push({
          zlevel: 1.5,
          name: '完成率',
          type: 'bar',
          showBackground: true,
          barWidth: 16,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgba(0, 220, 255, 1)'
              }, {
                offset: 1,
                color: 'rgba(0, 182, 255, 1)'
              }])
            }
          },
          data: datas.map(item => item.value[0])
        })
      }
      if (worldOption.series[0].map === 'shanxi') {
        datas.splice(datas.length - 1, 1)
        // datas = datas.sort((a, b) => {
        //   return b.value[0] - a.value[0]
        // })
        this.top10 = this.top10.sort((a, b) => {
          return b.c_1 - a.c_1
        })
        worldOption['title'] = [
          {
            text: '陕西省羊乳加工企业销售额TOP10',
            left: 40,
            top: '5%',
            bottom: 20,
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          {
            text: '陕西省主要基地县奶山羊存栏量占比分析',
            left: '72%',
            top: '5%',
            bottom: 20,
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          },
          {
            text: '陕西省主要基地县产奶占比分析',
            left: '72%',
            top: '55%',
            bottom: 20,
            textStyle: {
              color: '#fff',
              fontSize: 20
            }
          }
        ]
        worldOption['grid'] = [
          {
            left: '5%',
            top: '10%',
            bottom: '10%',
            width: '20%'
          },
          {
            left: '75%',
            top: '10%',
            bottom: '60%',
            width: '20%'
          }
        ]
        worldOption['legend'] = [
          {
            orient: 'vertical',
            icon: 'rect',
            itemGap: 24,
            itemWidth: 10,
            itemHeight: 10,
            top: '15%',
            right: 20,
            textStyle: {
              color: '#E9F7FF',
              fontSize: 14
            },
            data: datas.map(item => item.name)
          },
          {
            orient: 'vertical',
            icon: 'rect',
            itemGap: 24,
            itemWidth: 10,
            itemHeight: 10,
            top: '65%',
            right: 20,
            textStyle: {
              color: '#E9F7FF',
              fontSize: 14
            },
            data: datas.map(item => item.name)
          }
        ]

        worldOption['xAxis'] = {
          name: '亿元',
          show: true,
          type: 'value',
          nameTextStyle: {
            color: '#E9F7FF',
            fontSize: 15,
            padding: [30, 0, 0, 0]
          },
          nameGap: 50,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 15,
              color: '#E9F7FF'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        }
        worldOption['yAxis'] = {
          type: 'category',
          inverse: true,
          axisLabel: {
            show: true,
            textStyle: {
              fontSize: 15,
              color: '#E9F7FF'
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: this.top10.map(item => item.name)
        }
        worldOption.series.push({
          zlevel: 1.5,
          type: 'bar',
          showBackground: true,
          barWidth: 16,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: 'rgba(92, 219, 192, 1)'
              }, {
                offset: 1,
                color: 'rgba(25, 210, 171, 1)'
              }])
            }
          },
          data: this.top10.map(item => item.c_1)
        })
        worldOption.series.push({
          type: 'pie',
          radius: ['20%', '25%'],
          center: ['83%', '30%'],
          color: ['#18D8B1', '#2471D2', '#3CB5FF', '#6647FF', '#E9D017', '#F68E48', '#11A0BB'],
          data: datas.map(item => {
            return {
              name: item.name,
              value: item.value[0]
            }
          }),
          labelLine: {
            normal: {
              show: true,
            }
          },
          label: {
            normal: {
              formatter: '{d}%',
            }
          },
          tooltip: {
            show: false
          }
        })
        worldOption.series.push({
          type: 'pie',
          radius: ['20%', '25%'],
          center: ['83%', '80%'],
          color: ['#18D8B1', '#2471D2', '#3CB5FF', '#6647FF', '#E9D017', '#F68E48', '#11A0BB'],
          data: datas.map(item => {
            return {
              name: item.name,
              value: item.value[1]
            }
          }),
          labelLine: {
            normal: {
              show: true,
              lineStyle: {
                width: 1
              }
            }
          },
          label: {
            normal: {
              formatter: '{d}%',
              // rich: {
              //   hr: {
              //     width: '100%',
              //     borderWidth: 1,
              //     height: 0
              //   },
              //   d: {
              //     fontSize: 20,
              //     color: '#fff',
              //     align: 'left',
              //     padding: 4
              //   },
              //   c: {
              //     fontSize: 20,
              //     color: '#fff',
              //     align: 'left',
              //     padding: 4
              //   }
              // }
            }
          },
          tooltip: {
            show: false
          }
        })
      }

      echarts.registerMap('shanxi', Sxmap)
      // let indexTip1 = 0
      // setTimeout(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: indexTip1
      //   })
      // }, 500)

      // setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: indexTip1
      //   })
      // }, interval)
      const options = myChart.getOption()
      myChart.setOption(worldOption, true)
      myChart.dispatchAction({
        type: 'showTip',
        // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
        seriesIndex: 1,
        // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
        dataIndex: 0
      })
      let n = 1
      const sit = setInterval(() => {
        myChart.dispatchAction({
          type: 'showTip',
          // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
          seriesIndex: 1,
          // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
          dataIndex: n
        })
        if (n >= worldOption.series[0].data.length) {
          clearInterval(sit)
          myChart.dispatchAction({
            type: 'hideTip',
            // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
            seriesIndex: 1,
            // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
            dataIndex: n
          })
          if (!options && worldOption.series[0].map === 'world') {
            worldOption.geo.center = [116.398439, 39.911145]
            const n1 = setInterval(() => {
              if (worldOption.geo.zoom >= 4) {
                clearInterval(n1)
                this.getChinaDatas()
              } else {
                worldOption.geo.layoutCenter = ['50%', '50%']
                worldOption.geo.zoom = worldOption.geo.zoom + 0.5
                myChart.setOption(worldOption, true)
              }
            }, 500)
            // this.getChinaDatas()
          } else if (options.series[0].map === 'world' && worldOption.series[0].map === 'china') {
            worldOption.geo.center = [108.962114, 34.282847]
            //
            const n2 = setInterval(() => {
              if (worldOption.geo.zoom >= 4) {
                clearInterval(n2)
                this.getShanxiDatas()
              } else {
                worldOption.geo.layoutCenter = ['50%', '50%']
                worldOption.geo.zoom = worldOption.geo.zoom + 0.5
                myChart.setOption(worldOption, true)
              }
            }, 500)
            // this.getShanxiDatas()
          } else if (options.series[0].map === 'china' && worldOption.series[0].map === 'shanxi') {
            const n3 = setInterval(() => {
              if (worldOption.geo.zoom <= 0.5) {
                clearInterval(n3)
                myChart.dispatchAction({
                  type: 'hideTip',
                  // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
                  seriesIndex: 1,
                  // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
                  dataIndex: n
                })
                this.getChinaDatas()
              } else {
                worldOption.geo.layoutCenter = ['50%', '50%']
                worldOption.geo.zoom = worldOption.geo.zoom - 0.1
                myChart.setOption(worldOption, true)
              }
            }, 500)
          } else if (options.series[0].map === 'shanxi' && worldOption.series[0].map === 'china') {
            const n3 = setInterval(() => {
              if (worldOption.geo.zoom <= 0.5) {
                clearInterval(n3)
                myChart.dispatchAction({
                  type: 'hideTip',
                  // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
                  seriesIndex: 1,
                  // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
                  dataIndex: n
                })
                this.getWorldsData()
              } else {
                worldOption.geo.layoutCenter = ['50%', '50%']
                worldOption.geo.zoom = worldOption.geo.zoom - 0.1
                myChart.setOption(worldOption, true)
              }
            }, 500)
          } else if (options.series[0].map === 'china' && worldOption.series[0].map === 'world') {
            worldOption.geo.center = [116.398439, 39.911145]
            const n1 = setInterval(() => {
              if (worldOption.geo.zoom >= 4) {
                clearInterval(n1)
                this.getChinaDatas()
              } else {
                worldOption.geo.layoutCenter = ['50%', '50%']
                worldOption.geo.zoom = worldOption.geo.zoom + 0.5
                myChart.setOption(worldOption, true)
              }
            }, 500)
          }
        } else {
          n++
        }
      }, 2000)
    }
  }
}
</script>
<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#demo {
  width: 100%;
  height: 98%;
  margin: 10px 0 0 0;
  // display: flex;
  z-index: 9999;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, rgba(36, 58, 86, 0.19) 0%, rgba(21, 82, 119, 0) 100%);
  border: 2px solid;
  border-image: linear-gradient(277deg, rgba(43, 114, 158, 0.15), rgba(65, 139, 184, 1), rgba(21, 82, 119, 0.13)) 2 2;
}
#demoMap {
  width: 100%;
  height: 100%;
  // margin: 71px 0 13% 15%;
}
.rightTable {
  height: 240px;
  width: 300px;
  margin: 40px;
  // float: right;
  position: absolute;
  right: 20px;
  top: 40px;
  table {
    width: 100%;
    height: 100%;
    tr:nth-child(1) {
      font-size: 14px;
      // font-weight: 400;
      background: #1b314b;
      th {
        font-weight: normal;
      }
    }
    tr {
      height: 40px;
      font-size: 14px;
      color: white;
      border: 1px solid #155277;
    }
  }
}
.map-title1 {
  font-size: 22px;
  font-family: myfont;
  color: #3cb5ff;
  line-height: 24px;
  text-shadow: 0px 1px 8px rgba(23, 158, 240, 0.5);
  background: linear-gradient(180deg, #ffffff 0%, #3cb5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.map-title2 {
  font-size: 22px;
  font-family: myfont;
  // font-family: YouSheBiaoTiHei;
  color: #3cb5ff;
  line-height: 24px;
  text-shadow: 0px 1px 8px rgba(23, 158, 240, 0.5);
  background: linear-gradient(180deg, #ffffff 0%, #3cb5ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lottileBg {
  width: 100%;
  height: 409px;
  display: block;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
  text-align: center;
  opacity: 1;
  position: absolute;
  bottom: -90px;
}
</style>
